<template>
  <div class="d-flex flex-column my-container p-3">

    <el-form ref="form" :model="searchForm" :inline="true" class="d-flex justify-content-end">
      <el-form-item>
        <el-input prefix-icon="el-icon-search" type="input" placeholder="请输入设备名称" clearable @clear="searchClick"
                  v-model="searchForm.searchInput" @keyup.enter.native="searchClick"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
      </el-form-item>
    </el-form>

    <div class="col d-flex flex-column shadow p-3 rounded-lg">
      <div class="mb-3">
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </div>
      <div class="col d-flex over-auto">
        <el-table v-loading="loading" border :data="tableData" @cell-click="cellClick" height="100%" ref="tableRef">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="modelName" label="模型名称" align="center"/>
          <el-table-column prop="modelType" label="模型类型" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceType" label="设备类型" align="center">
            <template slot-scope="scope">
              {{ scope.row.deviceType == "0" ? "可配置设备模型" : "固化设备模型"}}
            </template>
          </el-table-column>
          <el-table-column prop="deviceNumber" label="绑定设备数量" align="center">
            <template slot-scope="scope">
              <span style="color: rgb(14, 120, 241);cursor: pointer;">{{ scope.row.deviceNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="createByName" label="创建人" align="center"></el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"></el-table-column>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template #default="{ row }">
<!--              <el-button type="primary" size="mini" v-permission="'DEV_PROTOCOL_EDIT'" @click="openConfigDialog(row)">配置协议</el-button>-->
              <el-button type="primary" size="mini" @click="goProMesDea(row)">报文管理</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination class="pagination" :total="count" :page.sync="pageIndex" :limit.sync="pageSize"
                  @pagination="pagination"/>
    </div>

    <!-- 弹框 -->
    <yc-dialog ref="ycDialog" dialogTitle="配置" centerTitle="配置">
      <template #content>
        <div class="dialog-content">
          <el-form ref="configFormRef" :rules="rules" :model="configForm" label-width="90px">
            <el-form-item label="协议名称" prop="agreementCode">
              <el-select v-model="configForm.agreementCode" style="width: 100%;">
                <el-option
                  v-for="item in agreementCodeList"
                  :key="item.agreementCode"
                  :label="item.agreementName"
                  :value="item.agreementCode"/>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" @click="saveConfigBtn">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>

    <!-- 弹框 -->
    <yc-dialog ref="deviceNumDialog" :show-center="false" dialogTitle="绑定设备数量" centerTitle="绑定设备数量">
      <template #content>
        <el-table border :data="deviceNumList">
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="deviceName" label="设备名称" align="center"/>
          <el-table-column prop="deviceCode" label="设备编码" align="center"/>
          <el-table-column prop="deviceOfRegionSysName" label="设备位置" align="center"/>
          <el-table-column prop="deviceDes" label="设备描述" align="center"/>
        </el-table>
      </template>
      <template #footer>
        <el-button @click="$refs.deviceNumDialog.dialogVisible = false">取消</el-button>
      </template>
    </yc-dialog>
    <!-- 封装操作后弹框 -->
    <global-message v-if="isGlobalMessageShow" @receive="receive" :message="message"/>
  </div>
</template>

<script>
  import {
    queryPageTopicMain,
    queryAllAgreement,
    deactivateBTopicMain,
    queryNetDevicePage,
    updateTopicMain,
    queryGatewayBindingAllDevice
  } from "@/api/settingManagement/protocolMessage"
  import ycDialog from "@/components/pageDialog"

  export default {
    data() {
      return {
        isGlobalMessageShow: false,
        messageTitleDes: "",
        message: "",
        messageBoxSaveShow: false,
        tableData: [],
        loading: false,
        configForm: {
          deviceCode: "",
          agreementCode: ""
        },
        rules: {
          agreementCode: [{
            required: true,
            message: "请选择协议名称",
            trigger: "change"
          }]
        },
        agreementCodeList: [],
        searchForm: {
          searchInput: ""
        },
        pageIndex: 1,
        pageSize: 20,
        count: 0,

        deviceNumList: []
      }
    },
    components: {
      ycDialog
    },
    created() {
      this.queryBTopicMainList()
    },
    methods: {
      // 查询协议报文list
      queryBTopicMainList(pageIndex = 1, pageSize = 20) {
        this.loading = true
        const {
          searchInput
        } = this.searchForm
        queryNetDevicePage({
          pageIndex,
          pageSize,
          isNet: "Yes",
          deviceName: searchInput
        }).then(res => {
          this.tableData = res.object.data
          this.count = res.object.count
        }).finally(() => {
          this.loading = false
        })
      },
      // 分页
      pagination(pageItem) {
        this.queryBTopicMainList(pageItem.page, pageItem.limit)
      },
      cellClick(row, column, cell, event) {
        if (column.property == "deviceNumber") {
          queryGatewayBindingAllDevice({
            deviceCode: row.deviceCode
          }).then(res => {
            this.deviceNumList = res.object
          })
          this.$refs.deviceNumDialog.dialogVisible = true
        }
      },
      // 模糊查询
      async searchClick() {
        this.queryBTopicMainList(1, 20)
      },

      goProMesDea(row) {
        this.$router.push({
          path: "/protocolMessage/protoMessageDetail",
          query: {
            deviceCode: row.deviceCode
          }
        })
      },
      // 配置
      openConfigDialog(row) {
        if (this.$refs["configFormRef"]) {
          this.$refs["configFormRef"].resetFields()
        }
        queryAllAgreement().then(res => {
          this.agreementCodeList = res.object
        })
        let rowData = {
          ...row
        }
        if (rowData) {
          this.configForm.deviceCode = rowData.deviceCode
          this.configForm.agreementCode = rowData.netDeviceCode
        }

        this.$refs.ycDialog.dialogVisible = true
      },
      // 配置保存按钮
      saveConfigBtn() {
        this.$refs["configFormRef"].validate((valid) => {
          if (valid) {
            // this.configForm.configCode = this.configCode
            updateTopicMain(this.configForm).then(res => {
              if (res.status == 200) {
                this.$message({
                  type: "success",
                  message: res.message
                })
                this.queryBTopicMainList()
                this.$refs.ycDialog.dialogVisible = false
              }
            })
          }
        })
      },
      /**
       * 刷新
       */
      refresh() {
        this.searchForm = {
          searchInput: ""
        }
        this.queryBTopicMainList()
      },
      /**
       * globalMessage的知道按钮的方法
       * */
      receive() {
        this.isGlobalMessageShow = false
      },
      async messageBoxSave(show) {
        this.messageBoxSaveShow = show
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
